﻿<!doctype html>
<html>
<head>
  <title>虚拟dom模拟</title>
</head>
<body>

<div id="container">
</div>

<script type="module">
  "use strict";
  import { patch, h, VNode } from './libs/vnode.js'
  var container = document.getElementById("container");
  function someFn(){ console.log(1)}
  function anotherEventHandler(){ console.log(2)}

  var oldVnode = h("div", {on: {click: someFn}}, [
    h("span", {style: {fontWeight: "bold"}}, "This is bold"),
    " and this is just normal text",
    h("a", {props: {href: "/foo"}}, "I\"ll take you places!")
  ]);

  // 第一次打补丁，用于渲染到页面，内部会建立关联关系，减少了创建oldvnode过程
  let diff = patch(container, oldVnode);
  //创建新节点
  var newVnode = h("div", {on: {click: anotherEventHandler}}, [
    h("span", {style: {fontWeight: "normal", fontStyle: "italic"}}, "This is now italic type"),
    " and this is still just normal text",
    h("a", {props: {href: "/bar"}}, "I\"ll take you places!")
  ]);
  //第二次比较，上一次vnode比较，打补丁到页面
  //VUE的patch在nextTick中，开启异步队列，删除了不必要的patch
  //nextTick异步队列解析，下面文章中会详解
  patch(oldVnode, newVnode); // Snabbdom efficiently updates the old view to the new state
  function test() {
    return {
      oldVnode,newVnode,container,diff
    }
  }
</script>
</body>
</html>